<template>
  <div style="margin-top: 30px; width: 100%;height:100%">
    <div>
      <Card style="width: 100%;margin-bottom:10px" >
        <div class="flex-row-center-center">
          <div style="width:70px;margin-right:5px"></div>
           <div class="content spilit-five" v-for="(item,index) in monthList" >
             <div v-if="index%12==0" style="width:70px">{{item}}</div>
          </div>
        </div>
        <div style="width: 100%">
          <div v-for="(ele,idx) in  hisStateList " :class="{normal:idx>0}" class="flex-row-center-end">
              <div style="width:70px;margin-right:5px" class="flex-row-end-end" v-for="k in ele.name">{{k}}</div>
              <div v-for="item in ele.jzStateList" class=" big-square normal" 
              :class="{normalStyle:item=='正常',abnormalStyle:item=='异常'}"></div>
          </div>
        </div>
      </Card>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  props:{
    hisStateList:Array,
    monthList:Array,
    selQk:String
  }
};
</script>
<style scoped>
.spilit-four{
    width: 8%;
    font-size: 18px;
    color: #c3c3c3;
    /* margin-right: 2px; */
    /* text-align: left; */
}
.spilit-five{
    font-size: 18px;
    color: #c3c3c3;
     /* margin-right: 2px; */
}
.spilit-three{
    width: 6%;
    font-size: 18px;
    color: #c3c3c3;
    text-align: left;
}
.normal {
    margin-top: 10px;
}
.wrap {
  display: flex;
  flex-wrap: wrap;
}
.content {
  width:2%;
}
.big-square {
  width: 1.5%;
  height: 0px;
  margin-right: 0.5%;
  padding-bottom: calc(1.5% - 6px);
  background: #f1f1f1;
   border: 3px solid #c3c3c3;
}
/* .square{
    width: calc(100% - 8px);
    height: 0px;
    padding-bottom: calc(100% - 8px);
    background: #f1f1f1;
    margin-top: 4px;
    margin-left: 4px;
} */
.normalStyle{
  background: #19be6b;
  border: none;
  width: 1.5%;
  height: 0px;
  padding-bottom: calc(1.5%);
}
.abnormalStyle{
  background: #ed4014;
  width: 1.5%;
  height: 0px;
  padding-bottom: calc(1.5% );
  border: none;
}
</style>